<style lang="less">
</style>

<template>
    <span v-on:click="toggle()">
        <Button type="primary" v-if="currentValue === trueValue">{{name}}</Button>
        <Button type="ghost" v-else>{{name}}</Button>
    </span>
</template>

<script>
    export default {
        name: 'SwitchButton',
        data() {
            return {
                currentValue:this.value
            };
        },
        props: {
            value: {
                type: [Boolean, String, Number],
                default:0
            },
            trueValue: {
                type: [String, Number, Boolean],
                default: 1
            },
            falseValue: {
                type: [String, Number, Boolean],
                default: 0
            },
            name:String,
        },
        methods: {
            toggle() {
                const checked = this.currentValue === this.trueValue ? this.falseValue : this.trueValue;
                this.currentValue = checked;
                this.$emit('input', checked);
            }
        },
        watch:{
            value(val){
                this.currentValue = val;
            }
        }

    };
</script>
